<template>
	<div class="list" style="min-height: 4rem;"
       v-loading="listLoading"
       element-loading-customClass="ne-loading"
       element-loading-background="rgba(255, 255, 255, 0.6)">
		<el-row :gutter="15">
			<template>
				<el-col :span="6" class="list-col" v-for="(item, index) in datasource.customerOrder" :key="index">
					<component @selectedCustomer="selectedCustomer" :is="currCard" :item="item" @showsale="showSaleInfo" @productChange="productChange"></component>
				</el-col>
			</template>
			<template v-if="!datasource.customerOrder || !datasource.customerOrder.length">
				<el-container>
					<el-main style="border:1px solid #ccc ;text-align:center;margin: .15rem 0;min-height: 1rem;">
						暂无数据
					</el-main>
				</el-container>
			</template>
		</el-row>
<!--    <el-button type="danger" @click="open1">fu</el-button>-->
		<div class="page">
<!--			<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="parseInt(datasource.pageInfo.pageIndex)" :page-size="parseInt(datasource.pageInfo.pageSize)" :page-sizes="[12, 24, 36, 48]" layout="prev, pager, next, sizes, jumper, total" :total="parseInt(datasource.pageInfo.rowCount)"> </el-pagination>-->
      <vxe-pager
          background
          align="center"
          :current-page="parseInt(datasource.pageInfo.pageIndex)"
          :page-size="parseInt(datasource.pageInfo.pageSize)"
          :total="parseInt(datasource.pageInfo.rowCount)"
          :page-sizes="[10, 12, 24, 36, 48, 100, 200]"
          :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
           @page-change="handlePageChange">
      </vxe-pager>
    </div>
		<el-dialog append-to-body :close-on-click-modal='false' width="99%" top="3vh" title="销售品信息" :visible.sync="orderItemsVisible" v-if="orderItemsVisible">
			<order-items-list :custorder="custorder"></order-items-list>
		</el-dialog>
<!--    <el-dialog title="修改方案" append-to-body v-if="dialogVisible" :visible.sync="dialogVisible" width="95%">-->
<!--      <modify-scheme :show.sync="dialogVisible"></modify-scheme>-->
<!--    </el-dialog>-->
	</div>
</template>

<script>
import OrderItemsList from "../../components/custorder/OrderItemsList";
import CustItemCard from "./ItemCard/CustItemCard.vue";
import OrderItemCard from "./ItemCard/OrderItemCard.vue";
import ModifyScheme from "@/components/custorder/pengding/ModifyScheme";
import cardmixin2 from "@/components/custorder/ItemCard/cardmixin2.js";
export default {
  mixins: [cardmixin2],
	data() {
		return {
		};
	},
  created() {
    localStorage.setItem("radionSelectedcustormer", null);
    this.$store.commit("orders/SET_CUST_ORDER_RADIOA", null);
  },
  components: {
		OrderItemsList,
		OrderItemCard,
		CustItemCard,
    ModifyScheme
	},
	computed: {
	},
	methods: {

    handlePageChange({currentPage, pageSize}) {
      this.SET_PAGEINDEX(currentPage);
      this.SET_PAGESIZE(pageSize);
      this.qryPendingOrderList(this.conditions);
    },
    // /**
    //  * 当前页码改变时
    //  */
    // handleCurrentChange(val) {
    //   console.log(val);
    //   this.SET_PAGEINDEX(val);
    //   this.qryPendingOrderList(this.conditions);
    // },
  }
};
</script>

<style lang="scss" scoped>
.list {
	.list-col {
		margin-top: 15px;
		border-radius: 4px;
		.el-card {
			::v-deep .el-card__body {
				padding: 0 10px 20px;
				.title {
					line-height: 40px;
					border-bottom: 1px solid #e6ebf5;
					.u-title{
						font-weight:bold;
						color:#333
					}
					.u-title:hover{
						font-weight:bold;
						color:blue;
						cursor:pointer;
					}
					.box-right-icon {
						text-align: right;
						.svg-icon {
							vertical-align: middle;
							margin-right: 5px;
						}
					}
				}
				.list-info-list {
					padding: 10px 0;
					.list-info {
						font-size: $fontSize_base;
						.list-info-1 {
							line-height: .3rem;
							color: #666;
						}
						.list-info-2 {
							color: #999;
						}
					}
				}
			}
			.el-button--small {
				border: 1px solid $blue;
				color: $blue;
				background: #eaf3fd
			}
		}
	}
	.page {
		text-align: center;
		margin-top: 20px;
	}

	.clearfix {
		.btn-xq {
			float: right;
			margin-top: -5px;
			.more {
				margin-right: 10px;
			}
		}
		.clearfix:before,
		.clearfix:after {
			display: table;
			content: "";
		}
		.clearfix:after {
			clear: both;
		}
	}
}
</style>
